<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登陆</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"/>
    <style type="text/css">
        body{
            background-image: url("/img/bj.jpeg");
            background-repeat:no-repeat;
            -moz-background-size:100% 100%;
            background-attachment:fixed;
        }
        .layui-card{
            background:rgba(256,256,256,0.9);
            width: 400px;
            height: 250px;
            box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
            position: absolute;
            top:0px;
            left:0px;
            right:0px;
            bottom:0px;
            margin:auto;
        }
        .layui-card-body{
            width: 350px;
            height: 350px;
        }
    </style>
</head>
<body>
<div class="layui-card">
    <div class="layui-card-header layui-bg-blue">欢迎登录</div>
    <div class="layui-card-body">
        <form class="layui-form" method="post">
            <div class="layui-form-item">

                <label class="layui-form-label">用户名</label>

                <div class="layui-input-inline">

                    <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" id="username">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" id="password">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn" lay-submit="" lay-filter="login">登录</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(["form","layer"],function(){
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;
        //监听表单的提交按钮，当提交按钮触发提交的时候，执行函数
        form.on("submit(login)",function(data){
            //1.登陆校验
            $.ajax({
                url: "/emp/login",
                type: "post",
                data: data.field,
                datatype: "json",
                success: function (res){
                    if(res.code == 0){
                        window.location.href="/forward/toHome";
                    }else {
                        layer.msg(res.msg,{icon:5});
                    }
                }
            })

            //2.如果登陆成功，跳转后台管理页面

        })
    })

    // 防止后退
    history.pushState(null, null, document.URL);
    window.addEventListener("popstate", function() {
        history.pushState(null, null, document.URL);
    });
</script>
</body>
</html>
